<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/home.css" />
    <title>华为</title>
  </head>
  <body>
    <div class="home">
      <!-- 顶部导航栏 -->
      <div class="top_nav">
        <div class="wrapper">
          <div class="left">
            <a href="#"> 华为官网 </a>
            <a href="#"> 荣耀官网 </a>
            <a href="#"> 软件应用 </a>
            <a href="#"> 花粉俱乐部 </a>
            <a href="#"> Select Region </a>
          </div>
          <div class="right">
            <a href="#">登录 注册</a>
            <a href="#">我的订单</a>
            <a href="#">V码(优购码)</a>
            <a href="#">手机版</a>
            <a href="#">网站导航</a>
          </div>
        </div>
      </div>

      <!-- logo栏 -->
      <div class="logo">
        <div class="wrapper">
          <div class="left">
            <img src="./images/logo.huawei.png" alt="" />
            <span>商城首页</span>
          </div>
          <div class="right">
            <img src="./images/qrcode_vmall_app01.png" alt="" />
            <p>微信扫码关注我们</p>
          </div>
        </div>
      </div>

      <!-- banner栏 -->
      <div class="banner">
        <div class="nav">
          <span>华为专区</span>
          <span>HUAWEI P10</span>
          <span>HUAWEI Mate 9</span>
          <span>HUAWEI Mate</span>
          <span>HUAWEI Mate10</span>
        </div>
        <div class="swipper">
          <img src="./images/2017042210305530.jpg" alt="" />
        </div>
        <div class="side">
          <p>
            <a href="#">全部商品</a>
          </p>
          <p><a href="#">手机</a></p>
          <p class="detail">HUAWEI Mate系列</p>
          <p>
            <a href="#">平板 & 穿戴</a>
          </p>
          <p class="detail">平板电脑 手环/手表</p>
          <p>
            <a href="#">笔记本电脑</a>
          </p>
          <p>
            <a href="#">智能家居</a>
          </p>
          <p class="detail">子母路由 电力猫 路由器</p>
          <p>
            <a href="#">专属配件</a>
          </p>
          <p class="detail">贴膜 保护壳 保护套</p>
          <p>
            <a href="#">通用配件</a>
          </p>
          <p class="detail">耳机 音箱</p>
        </div>
        <div class="point">
          <div class="sub_point">1</div>
          <div class="sub_point">2</div>
          <div class="sub_point">3</div>
          <div class="sub_point">4</div>
        </div>
      </div>

      <!-- 图片区1 -->
      <div class="pic1">
        <div class="wrapper">
          <img src="./images/20170310105644358.jpg" alt="" />
          <img src="./images/2017031017165551.jpg" alt="" />
          <img src="./images/20170310090516264.jpg" alt="" />
          <img src="./images/20170313143419135.jpg" alt="" />
        </div>
      </div>

      <!-- 图片区2 -->
      <div class="pic2">
        <div class="wrapper">
          <div class="list">
            <div class="info">
              HUAWEI P10 Plus
              <p class="detail">金属钻雕工艺</p>
              <p class="price">￥4388</p>
            </div>
            <img src="./images/1489161234073.png" alt="" />
          </div>
          <div class="list">
            <div class="info">
              HUAWEI nova 青春版
              <p class="detail">炫出我色彩</p>
              <p class="price">￥1999</p>
            </div>
            <img src="./images/1491476650727.png" alt="" />
          </div>
          <div class="list">
            <div class="info">
              HUAWEI Mate 9 Pro
              <p class="detail">2K双曲面屏</p>
              <p class="price">￥￥4699</p>
            </div>
            <img src="./images/1484219138436.png" alt="" />
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="wrapper">
          <!-- 服务 -->
          <div class="service">
            <ul>
              <li>
                <h5></h5>
                <p>500强企业 品质保证</p>
              </li>
  
              <li>
                <h5></h5>
  
                <p>7天退货 15天换货</p>
              </li>
  
              <li>
                <h5></h5>
  
                <p>99元起免运费</p>
              </li>
  
              <li>
                <h5></h5>
  
                <p>448家维修网点 全国联保</p>
              </li>
            </ul>
          </div>
          <div class="help">
            <div class="left">
              <dl>
                <dt>
                  <h5></h5>帮助中心
                </dt>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">配送方式</a></dd>
                <dd><a href="#">支付方式</a></dd>
                <dd><a href="#">常见问题</a></dd>
              </dl>
  
              <dl>
                <dt>
                  <h5></h5>售后服务
                </dt>
                <dd><a href="#">保修政策</a></dd>
                <dd><a href="#">退换货政策</a></dd>
                <dd><a href="#">退换货流程</a></dd>
                <dd><a href="#">保修状态查询</a></dd>
              </dl>
  
              <dl>
                <dt>
                  <h5></h5>技术支持
                </dt>
                <dd><a href="#">售后网点</a></dd>
                <dd><a href="#">荣耀零售店铺</a></dd>
                <dd><a href="#">预约维修</a></dd>
                <dd><a href="#">手机寄修服务</a></dd>
                <dd><a href="#">维修配件价格查询</a></dd>
                <dd><a href="#">软件下载</a></dd>
              </dl>
  
              <dl>
                <dt>
                  <h5></h5>售后服务
                </dt>
  
                <dd><a href="#">售后政策</a></dd>
  
                <dd><a href="#">退款说明</a></dd>
  
                <dd><a href="#">取消订单</a></dd>
              </dl>
  
              <dl>
                <dt>
                  <h5></h5>关注我们
                </dt>
  
                <dd><a href="#">在线客服</a></dd>
  
                <dd><a href="#">新浪微博</a></dd>
  
                <dd><a href="#">腾讯微博</a></dd>
                <dd><a href="#">花粉俱乐部</a></dd>
                <dd><a href="#">商城手机版</a></dd>
              </dl>
            </div>
          </div>
          <!-- 版权 -->
          <div class="copyright">
            <p>
              <a href="#">友情链接：</a>| <a href="#">华为官网</a>|
              <a href="#">华为消费者业务</a>| <a href="#">荣耀官网</a>|
              <a href="#">花粉俱乐部</a>| <a href="#">莫塞尔商城</a>|
              <a href="#">爱旅官网</a>|<a href="#">华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |</a>
            </p>
            <p><a href="#">中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |</a></p>
            <p><a href="#">阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | </a><a href="#" style="color: red;">申请链接 >></a></p>
            <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利</p>
            <div style="display: flex;align-content: center;justify-content: center;">
              <h5 style="background-image: url(./images/20160226162651249.png); width: 20px;height: 20px;margin-right: 5px;"></h5>
              <p>公安备案 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号</p>
            </div>
            <div>
              <ul style="display: flex;justify-content: center;margin-top: 10px;">
                <li><img src="./images/20161224180914742.jpg" alt=""></li>
                <li><img src="./images/20160226162415360.png" alt=""></li>
                <li><img src="./images/20160226162521265.png" alt=""></li>
                <li><img src="./images/20160226162531395.png" alt=""></li>
              </ul>
            </div>
          </div>
        </div>
    </div>
  </body>
</html>
